<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>告警日志记录</title>
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: layui"></th:block>

</head>
<body>
<form class="layui-form layui-form-pane" id="list_form">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>告警日志记录</legend>
  </fieldset>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 150px">告警信息</label>
      <div class="layui-input-inline">
        <input type="text" name="content" id="content" autocomplete="off" class="layui-input"
               placeholder="请输入告警信息">
      </div>
    </div>
    <div class="layui-inline">
      <button type="button" class="layui-btn layui-btn-sm" onclick="listDangerLogByParams()">查询</button>
      <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="resetForm()">重置</button>
    </div>
  </div>
</form>
<table class="layui-table" lay-filter="table" id='table'></table>
<!--表格操作-->
<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
    {{#  if(d.status == 'WAIT_DEAL'){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="falseAlarm">误告警</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="police">出警</a>
    {{#  } }}
  </div>
</script>
<script th:inline="javascript">
  /*<![CDATA[*/
  var table;
  var form;
  var statusDicMap = [[${statusDicMap}]];
  layui.use(['table', 'form'], function () {
    table = layui.table;
    form = layui.form;

    table.render({
      elem: '#table',
      id: 'table',
      toolbar: '#toolbarDemo',
      url: path + '/log/listDangerLogByParams',
      cols: [
        [
          {type: 'numbers', field: "id", title: "序号", width: 60},
          {field: 'mac', title: 'mac地址', width: 180},
          {field: 'ip', title: 'ip地址', width: 130},
          {field: 'address', title: '地址', width: 230},
          {
            field: 'status', title: '状态', width: 90, align: 'center',
            templet(row) {
              return "<a class='layui-btn layui-btn-xs'>" + statusDicMap[row.status] + "</a>";
            }
          },
          {
            field: 'createTime', title: '告警时间', width: 180, align: 'center', templet: function (row) {
              return new Date(row.createTime).format("yyyy-MM-dd HH:mm:ss");
            }
          },
          {
            field: 'updateTime', title: '更新时间', width: 180, align: 'center', templet: function (row) {
              var txt = "-";
              if (row.updateTime) {
                txt = new Date(row.updateTime).format("yyyy-MM-dd HH:mm:ss");
              }
              return txt;
            }
          },
          {field: 'remark', title: '备注'},
          {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
        ]
      ],
      limit: 10,
      request: {
        pageName: 'pn',
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      page: true
    });

    table.on('tool(table)', function (obj) {
      var data = obj.data;
      var selectId = [data.uuid];
      if (obj.event === 'falseAlarm') {

      } else if (obj.event === 'police') {

      }
    });
  });

  document.onkeydown = EnterLogin;

  function EnterLogin(event) {
    if (event.keyCode == 13) {
      listDangerLogByParams();
    }
  }

  function listDangerLogByParams() {
    table.reload('table', {
      page: {
        curr: 1 //重新从第 1 页开始
      }
      , where: {
        content: $("#content").val()
      }
    });
  }

  function resetForm() {
    $('#list_form')[0].reset();
  }

  /*]]>*/
</script>
</body>
</html>